<template>
  <div class="student">
    <el-table :data="StudentList" border stripe max-height="600" style="width: 100%">
      <el-table-column label="Name" prop="studentName" width="180"/>
      <el-table-column label="Age" prop="studentAge" width="180"/>
      <el-table-column label="Sex" prop="studentSex" width="180"/>
      <el-table-column label="家长" prop="patriarch" width="180">
        <template #default="p">
          {{ p.row.patriarch.patriarchName }}
        </template>
      </el-table-column>
      <el-table-column label="班级" prop="classRoom" width="180">
        <template #default="c">
          {{ c.row.classRoom.classRoomName}}
        </template>
      </el-table-column>

<!--   这个没有成功，再改改   -->
<!--      <el-table-column label="教师" prop="teacherList">-->
<!--        <template #default="t1">-->
<!--          <div v-for="t in t1.row.teacherList" v-bind:key="t.teacherId">-->
<!--            <template>-->
<!--              <el-tag type="success">{{ t.teacherName }}</el-tag>-->
<!--            </template>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>

import { ElMessage } from 'element-plus'

const msgError = (a) => {
  ElMessage({
    type: "error",
    showClose: true,
    message: a,
  })
}
const msgSuccess = (a) => {
  ElMessage({
    type: "success",
    showClose: true,
    message: a,
    // 居中
    center: true,
  })
}
const msgInfo = (a) => {
  ElMessage({
    type: "info",
    showClose: true,
    message: a,
  })
}
const msgWarning = (a) => {
  ElMessage({
    type: "warning",
    showClose: true,
    message: a,
  })
}
export default {
  /* eslint-disable */
  name: 'Student',
  data() {
    return {
      StudentList: [
        {
          studentId: 1,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        },
        {
          studentId: 2,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        },
        {
          studentId: 3,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        }
      ]
    }
  },
  created() {
    // 加载页面时 启动
    msgInfo("启动");

    msgWarning("警告");

    this.getStudentAll();
  },
  methods: {
    async getStudentAll(){
      const { data: studentAllResult } = await this.$http.get('/student/select');

      const studentAllData = studentAllResult.data;
      if (studentAllResult.code === 200) {
        msgSuccess(studentAllResult.msg);
        this.StudentList = studentAllData;
      } else {
        msgError(studentAllResult.msg);
      }
      // console.log(studentAllResult)
    }
  }
}
</script>

<style scoped>
  .student {
    margin: 10px;
  }
</style>
